<div
  class="devui-drop{{ popDirection === 'bottom' ? 'down' : 'up' }} 
  {{ size ? 'devui-select-' + size : '' }} 
  devui-dropdown-origin"
  [ngClass]="[isOpen ? 'open' : '', overview === 'underlined' ? 'devui-select-underlined-border' : '', disabled ? 'disabled' : '']"
  #selectWrapper
>
  <div
    #selectBox
    class="devui-form-group devui-has-feedback"
    (click)="toggle()"
    (focus)="autoToggle($event)"
    [tabindex]="0"
    (keydown.esc)="onEscKeyup($event)"
    (keydown.ArrowUp)="handleKeyUpEvent($event)"
    (keydown.ArrowDown)="handleKeyDownEvent($event)"
    (keydown.enter)="handleKeyEnterEvent($event)"
  >
    <input
      #selectInput
      [placeholder]="placeholder"
      [disabled]="disabled"
      [ngClass]="[size ? 'devui-select-input-' + size : '']"
      type="text"
      class="devui-form-control devui-select-input devui-input"
      [minLength]="0"
      autocomplete="off"
      [tabindex]="-1"
      [readonly]="readonly"
      [value]="_inputValue || ''"
      *ngIf="
        !(extraConfig?.labelization?.enable && multiple) &&
        !(!extraConfig?.labelization?.enable && extraConfig?.selectedItemWithTemplate?.enable && (inputItemTemplate || itemTemplate))
      "
    />
    <div
      #selectInputWithTemplate
      class="devui-select-list-wrapper devui-form-control {{ size ? 'devui-select-input-' + size : '' }}"
      *ngIf="extraConfig?.selectedItemWithTemplate?.enable && (inputItemTemplate || itemTemplate) && !extraConfig?.labelization?.enable"
    >
      <div class="devui-select-placeholder" *ngIf="!_inputValue">
        {{ placeholder }}
      </div>
      <div class="devui-select-selected-item-with-template" *ngIf="_inputValue">
        <ng-template
          [ngTemplateOutlet]="inputItemTemplate || itemTemplate"
          [ngTemplateOutletContext]="{
            option: value,
            filterKey: filterKey,
            position: 'result',
            inputValue: _inputValue
          }"
        >
        </ng-template>
      </div>
    </div>

    <div
      #selectInputWithLabel
      class="devui-select-list-wrapper devui-form-control {{ size ? 'devui-select-input-' + size : '' }}"
      *ngIf="extraConfig?.labelization?.enable && multiple"
    >
      <div class="devui-select-placeholder" *ngIf="multiItems.length === 0">
        {{ placeholder }}
      </div>
      <ul
        class="devui-select-tag-list {{ extraConfig?.labelization?.overflow }}"
        [style.maxHeight]="extraConfig?.labelization?.containerMaxHeight || extraConfig?.labelization?.containnerMaxHeight"
        *ngIf="multiItems.length > 0"
      >
        <li
          class="devui-select-tag-item"
          *ngFor="let item of multiItems; let index = index; trackBy: trackByOptionPointer"
          [style.maxWidth]="extraConfig?.labelization?.labelMaxWidth"
          [ngClass]="{
            disabled: optionDisabledKey && item.option[optionDisabledKey]
          }"
        >
          <span class="over-flow-ellipsis" title="{{ valueParser(item.option) }}">{{ valueParser(item.option) }}</span>
          <a
            class="devui-select-tag-remove-button"
            (click)="removeItem(item, $event)"
            *ngIf="!(disabled || (optionDisabledKey && item.option[optionDisabledKey]))"
          >
            <svg
              width="6px"
              height="6px"
              viewBox="0 0 10 10"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero">
                  <path
                    d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
                  ></path>
                </g>
              </g>
            </svg>
          </a>
        </li>
      </ul>
    </div>

    <span class="devui-form-control-feedback devui-input-group-addon" [ngClass]="{ 'devui-clear-icon-show': isClearIconShow }">
      <span class="devui-select-clear-icon" (mousedown)="$event.preventDefault()" (click)="valueClear($event)"> </span>
      <span class="devui-select-chevron-icon" [ngClass]="{ 'devui-select-chevron-icon-animation': showAnimation }">
        <svg
          width="1em"
          height="1em"
          viewBox="0 0 16 16"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
              fill-rule="nonzero"
            ></path>
          </g>
        </svg>
      </span>
    </span>
  </div>
  <ng-container *ngIf="appendToBody">
    <ng-template
      cdk-connected-overlay
      [cdkConnectedOverlayOrigin]="cdkConnectedOverlayOrigin"
      [cdkConnectedOverlayWidth]="dropDownWidth"
      [cdkConnectedOverlayOpen]="isOpen"
      [cdkConnectedOverlayPositions]="overlayPositions"
      (positionChange)="onPositionChange($event)"
      (backdropClick)="isOpen = false"
    >
      <ng-template [ngTemplateOutlet]="selectDropdownTpl"></ng-template>
    </ng-template>
  </ng-container>
  <ng-container *ngIf="!appendToBody">
    <ng-template [ngTemplateOutlet]="selectDropdownTpl"></ng-template>
  </ng-container>
</div>

<!--下拉模板-->
<ng-template #selectDropdownTpl>
  <div
    #selectMenu
    class="devui-dropdown-menu"
    [ngClass]="{
      'devui-dropdown-menu-cdk': appendToBody,
      'devui-custom-right': customViewTemplate && customViewDirection === 'right',
      'devui-custom-left': customViewTemplate && customViewDirection === 'left',
      'devui-custom-top': customViewTemplate && customViewDirection === 'top',
      'devui-dropdown-menu-multiple': multiple
    }"
    [@fadeInOut]="isOpen && startAnimation ? (appendToBody ? menuPosition : popDirection) : 'void'"
    (@fadeInOut.done)="animationEnd($event)"
    [@.disabled]="!showAnimation"
  >
    <ul
      dLoading
      [showLoading]="showLoading"
      positionType="relative"
      [message]="i18nCommonText?.loading"
      [loadingTemplateRef]="loadingTemplateRef"
      [backdrop]="true"
      class="devui-dropdown-menu-wrap {{ size ? 'devui-dropdown-menu-' + size : '' }}"
      (click)="$event.stopPropagation(); $event.preventDefault()"
    >
      <li [style.display]="isSearch ? 'block' : 'none'">
        <div class="devui-form-group devui-has-feedback" [style.margin]="'0'">
          <input
            #filterInput
            [ngClass]="[size ? 'devui-select-input-' + size : '', filter ? 'devui-search-filter' : '']"
            name="select"
            type="text"
            [(ngModel)]="filter"
            autocomplete="off"
            [placeholder]="searchPlaceholder"
            class="devui-form-control devui-select-search devui-select-input"
            (keydown.ArrowUp)="handleKeyUpEvent($event)"
            (keydown.ArrowDown)="handleKeyDownEvent($event)"
            (keydown.enter)="handleKeyEnterEvent($event)"
            (keydown.esc)="onEscKeyup($event)"
          />
          <span class="devui-form-control-feedback">
            <svg
              width="14px"
              height="14px"
              viewBox="0 0 14 14"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              class="svg-icon-search"
              style="vertical-align: middle"
            >
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-1.000000, -1.000000)">
                  <path
                    d="M7.30811922,1 C10.7919973,1 13.6162384,3.82424117 13.6162384,7.30811922 C13.6162384,8.72507634 13.149053,10.0329164 12.3603151,11.0860065 L14.7360564,13.4616238 C15.0879812,13.8135487 15.0879812,14.3841316 14.7360564,14.7360564 C14.3841316,15.0879812 13.8135487,15.0879812 13.4616238,14.7360564 L11.0860065,12.3603151 C10.0329164,13.149053 8.72507634,13.6162384 7.30811922,13.6162384 C3.82424117,13.6162384 1,10.7919973 1,7.30811922 C1,3.82424117 3.82424117,1 7.30811922,1 Z M7.31,2.51 C4.6590332,2.51 2.51,4.6590332 2.51,7.31 C2.51,9.9609668 4.6590332,12.11 7.31,12.11 C9.9609668,12.11 12.11,9.9609668 12.11,7.31 C12.11,4.6590332 9.9609668,2.51 7.31,2.51 Z"
                    fill-rule="nonzero"
                  ></path>
                </g>
              </g>
            </svg>
          </span>
          <span
            #clearIcon
            class="devui-form-control-feedback devui-search-clear"
            [ngClass]="size ? 'devui-search-clear-' + size : ''"
            (click)="clearText()"
            *ngIf="filter"
          >
            <svg
              width="10px"
              height="10px"
              viewBox="0 0 10 10"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              class="svg-icon-clear"
              [ngClass]="size ? 'svg-icon-clear-' + size : ''"
            >
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero">
                  <path
                    d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
                  ></path>
                </g>
              </g>
            </svg>
          </span>
        </div>
      </li>
      <ul
        *ngIf="!virtualScroll || enableLazyLoad; else scrollViewTpl"
        class="devui-select-list-unstyled devui-scrollbar"
        dLazyLoad
        [enableLazyLoad]="enableLazyLoad"
        (loadMore)="loadMoreEvent($event)"
        [ngStyle]="{ 'max-height': scrollHight, width: '100%' }"
        #dropdownUl
      >
        <ng-template [ngTemplateOutlet]="selectAllTpl"></ng-template>
        <ng-container *ngFor="let item of availableOptions; let index = index; trackBy: trackByFn">
          <ng-template [ngTemplateOutlet]="dropdownItemTpl" [ngTemplateOutletContext]="{ item: item, index: index }"></ng-template>
        </ng-container>
      </ul>
      <li *ngIf="availableOptions.length === 0 && !noResultItemTemplate" class="devui-no-data-tip">
        <ng-container *ngIf="!filter">{{ i18nCommonText?.noData }}</ng-container>
        <ng-container *ngIf="filter">{{ i18nCommonText?.noRecordsFound }}</ng-container>
      </li>
      <li *ngIf="availableOptions.length === 0 && noResultItemTemplate" class="devui-no-data-tip">
        <ng-template [ngTemplateOutlet]="noResultItemTemplate" [ngTemplateOutletContext]="{ options: options }"></ng-template>
      </li>
    </ul>
    <ng-container *ngIf="customViewTemplate">
      <div class="devui-select-custom-area">
        <ng-template [ngTemplateOutlet]="customViewTemplate" [ngTemplateOutletContext]="{ $implicit: this, choose: choose }"></ng-template>
      </div>
    </ng-container>
  </div>
</ng-template>

<!--虚拟滚动模板-->
<ng-template #scrollViewTpl>
  <cdk-virtual-scroll-viewport
    [ngStyle]="{
      height: getVirtualScrollHeight(availableOptions.length, size),
      width: '100%',
      'max-height': scrollHight
    }"
    [itemSize]="realVirtualScrollItemSize"
    class="viewport-wrapper devui-select-list-unstyled devui-scrollbar"
    #dropdownUl
  >
    <ng-template [ngTemplateOutlet]="selectAllTpl"></ng-template>
    <ng-container *cdkVirtualFor="let item of availableOptions; let index = index; trackBy: trackByFn">
      <ng-template [ngTemplateOutlet]="dropdownItemTpl" [ngTemplateOutletContext]="{ item: item, index: index }"></ng-template>
    </ng-container>
  </cdk-virtual-scroll-viewport>
</ng-template>

<!--全选模板-->
<ng-template #selectAllTpl>
  <li class="devui-dropdown-item" *ngIf="showSelectAll()" (click)="selectAll()">
    <span>
      <d-checkbox [label]="i18nCommonText.checkAll" [isShowTitle]="false" [halfchecked]="halfChecked" [(ngModel)]="allChecked"></d-checkbox>
    </span>
  </li>
</ng-template>

<!--下拉Item模板-->
<ng-template #dropdownItemTpl let-item="item" let-index="index">
  <li
    title="{{ formatter(item.option) }}"
    [ngClass]="[
      'devui-dropdown-item',
      item.isChecked ? highlightItemClass : '',
      selectIndex === index && item.id !== activeIndex ? 'selected' : '',
      optionDisabledKey && item.option[optionDisabledKey] ? 'disabled' : ''
    ]"
    (click)="choose(item.option, item.id, $event)"
  >
    <ng-template
      [ngTemplateOutlet]="inputItemTemplate || itemTemplate || (multiple ? checkBoxItem : defaultItem)"
      [ngTemplateOutletContext]="
        multiple
          ? {
              option: item.option,
              checked: item.isChecked,
              filterKey: filterKey,
              position: 'list',
              template: checkBoxItem
            }
          : {
              option: item.option,
              filterKey: filterKey,
              position: 'list',
              template: defaultItem
            }
      "
    >
    </ng-template>
  </li>
</ng-template>

<ng-template #defaultItem let-option="option">
  {{ formatter(option) }}
</ng-template>

<ng-template #checkBoxItem let-option="option" let-checked="checked">
  <d-checkbox
    [color]="color"
    [label]="formatter(option)"
    [cssClass]="'devui-select-checkbox'"
    [ngModel]="checked"
    [disabled]="option[optionDisabledKey]"
  >
  </d-checkbox>
</ng-template>
